<script lang="ts" setup>
import { ActionConfigType, ConfirmDisplay } from '../../typing'
import { message, Modal } from 'ant-design-vue'

defineProps({
  data: { type: Array<ActionConfigType>, default: () => [] },
  space: { type: Number, default: 0 },
  divider: { type: Boolean, default: false }
})

const emit = defineEmits(['handler'])

const onShowConfirm = async (data: ActionConfigType) => {
  let res = true
  if (data.confirmBefore) {
    res = await data.confirmBefore.method()
    !res && message.warning(data.confirmBefore.warnText)
  }
  res &&
    Modal.confirm({
      title: data.secondConfirm?.title,
      centered: true,
      onOk() {
        emit('handler', data.type)
      }
    })
}
</script>

<template>
  <a-space :size="space" class="table-operate-column-wrapper">
    <template v-for="(item, idx) in data" :key="item.type">
      <a-button
        v-if="!item.secondConfirm"
        v-bind="item.btnDisplay"
        @click="$emit('handler', item.type)"
      >
        {{ item.text }}
      </a-button>

      <a-popconfirm
        v-else-if="item.secondConfirm.display === ConfirmDisplay.Popconfirm"
        :title="item.secondConfirm.title"
        :placement="item.secondConfirm.placement || 'left'"
        @confirm="$emit('handler', item.type)"
      >
        <a-button v-bind="item.btnDisplay">{{ item.text }}</a-button>
      </a-popconfirm>

      <a-button v-else v-bind="item.btnDisplay" @click="onShowConfirm(item)">
        {{ item.text }}
      </a-button>

      <a-divider type="vertical" v-if="divider && idx !== data.length - 1" />
    </template>
  </a-space>
</template>